<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
    <meta charset="UTF-8">
    <title>天天生鲜-提交订单</title>
    <link rel="stylesheet" type="text/css" th:href="@{/css/reset.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/css/main.css}">
</head>
<body>
<div th:replace="top::top"></div>

<h3 class="common_title">确认收货地址</h3>

<div class="common_list_con clearfix">
    <dl>
        <dt>寄送到：</dt>
        <th:block th:each="shipping:${shippingList}">
            <dd><input name="shipping" th:value="${shipping.id}" type="radio"><span th:text="|${shipping.receiverProvince} ${shipping.receiverCity} ${shipping.receiverDistrict} ${shipping.receiverName} ${shipping.receiverPhone} ${shipping.receiverAddress}|"></span></dd>
        </th:block>

    </dl>
    <a href="user_center_site.html" class="edit_site">编辑收货地址</a>

</div>

<h3 class="common_title">支付方式</h3>
<div class="common_list_con clearfix">
    <div class="pay_style_con clearfix">
        <input type="radio" name="paymentType" value="0" checked>
        <label class="cash">货到付款</label>
        <input type="radio" name="paymentType" value="1" >
        <label class="weixin">微信支付</label>
        <input type="radio" name="paymentType" value="2" >
        <label class="zhifubao"></label>
        <input type="radio" name="paymentType" value="3" >
        <label class="bank">银行卡支付</label>
    </div>
</div>

<h3 class="common_title">商品列表</h3>

<div class="common_list_con clearfix">
    <ul class="goods_list_th clearfix">
        <li class="col01">商品名称</li>
        <li class="col02">商品单位</li>
        <li class="col03">商品价格</li>
        <li class="col04">数量</li>
        <li class="col05">小计</li>
    </ul>
    <th:block th:each="cartVO:${cartVOList}">
        <ul class="goods_list_td clearfix">
            <li class="col01">1</li>
            <li class="col02"><img th:src="${cartVO.mainImageFullUrl}"></li>
            <li class="col03" th:text="${cartVO.productName}"></li>
            <li class="col04">台</li>
            <li class="col05" th:text="|${cartVO.productPrice}元|"></li>
            <li class="col06" th:text="${cartVO.quantity}"></li>
            <li class="col07" th:text="|${cartVO.productPrice*cartVO.quantity}元|"></li>
        </ul>
    </th:block>

</div>

<h3 class="common_title">总金额结算</h3>

<div class="common_list_con clearfix">
    <div class="settle_con">
        <th:block th:each="cartVO:${cartVOList}">
        <div class="total_goods_count">共<em>2</em>件商品，总金额<li class="total_goods_count"
                                                             th:text="|${cartVO.productPrice*cartVO.quantity}元|"></li></div>
        <div class="transit">运费：<b>10元</b></div>
        <div class="total_pay">实付款：<b><li th:text="|${cartVO.productPrice*cartVO.quantity+10}元|"></li></b></div>
        </th:block>
    </div>
</div>

<div class="order_submit clearfix">
    <a href="javascript:;" id="order_btn">提交订单</a>
</div>

<div class="footer">
    <div class="foot_link">
        <a href="#">关于我们</a>
        <span>|</span>
        <a href="#">联系我们</a>
        <span>|</span>
        <a href="#">招聘人才</a>
        <span>|</span>
        <a href="#">友情链接</a>
    </div>
    <p>CopyRight © 2023 Qing天天生鲜信息技术有限公司 All Rights Reserved</p>
    <p>电话：17658159724    鲁ICP备23030588888号</p>
</div>

<div class="popup_con">
    <div class="popup">
        <p>订单提交成功！</p>
    </div>

    <div class="mask"></div>
</div>

<script type="text/javascript" th:src="@{/js/jquery-2.1.4.js}"></script>
<script type="text/javascript" th:src="@{/js/layer/layer.js}"></script>
<script type="text/javascript" th:src="@{/js/mylayer.js}"></script>

<script type="text/javascript">
    $(function() {
        refreshTotalPrice();
    });


    $('#order_btn').click(function() {
        $.post(
            '/order/add',
            {'shippingId': $('input[name=shipping]:checked').val(),
                'paymentType': $('input[name=paymentType]:checked').val()},
            function(jsonResult) {
                console.log(jsonResult);
                if (jsonResult.ok) {
                    mylayer.okUrl(jsonResult.msg, '/order/getOrderListPage')
                } else {
                    mylayer.errorMsg(jsonResult.msg);
                }
            },
            'json'
        );
    });


    function refreshTotalPrice() {
        var selectCheckboxs = $('input[name=selectCheckbox]:checked');
        $('#checkedTotalCount').text(selectCheckboxs.length);
        var totalPrice = 0;
        $(selectCheckboxs).each(function() {
            //this dom对象
            //checkbox111            checkbox222
            //cartItemTotalPrice111  cartItemTotalPrice222
            var checkboxId = this.id;
            var cartId = checkboxId.substr('checkbox'.length);//111
            var str = $('#cartItemTotalPrice' + cartId).text();//1892839元
            var cartItemTotalPrice = str.substr(0, str.length - 1);
            console.log(cartItemTotalPrice);
            totalPrice += parseFloat(cartItemTotalPrice);
        });
        $('#totalPrice').text(totalPrice);

        var checkboxs = $('input[name=selectCheckbox]')
        if (selectCheckboxs.length == checkboxs.length) {
            $('#checkAll').prop('checked', true);
        } else {
            $('#checkAll').prop('checked', false);
        }
    }
</script>
</body>
</html>
